<template>
  <div class="pay" :style="elStyle">
    <div class="pay-info-container">
      <i class="el-icon-arrow-left" @click="goBack"></i>
      <div class="pay-top">
        <div class="pay-tl">
          <div class="title">请选择会员类型</div>
          <div class="pay-vip">
            <div
              class="item"
              :class="{ active: type == '01' }"
              @click="changeVip('01')"
            >
              <div class="tag">非学术</div>
              <div class="check">
                <i class="el-icon-check"></i>
              </div>
              <div class="p1">VIP</div>
              <!-- <div class="p2">无限对话</div> -->
            </div>
            <div
              class="item"
              :class="{ active: type == '02' }"
              @click="changeVip('02')"
            >
              <div class="tag">学术</div>
              <div class="check">
                <i class="el-icon-check"></i>
              </div>
              <div class="p1">VIP</div>
              <!-- <div class="p2">无限对话</div> -->
            </div>
          </div>
        </div>
        <div class="pay-tr">
          <img class="avatar" src="@/assets/imgs/avatar.jpg" alt="" />
          <div class="info">
            <div class="name">{{ nickname }}</div>
            <div class="tip">
              <span v-if="!isVip">会员未开通，</span
              ><span class="history" @click="showPayList()">查看购买记录</span>
            </div>
          </div>
        </div>
      </div>
      <div class="list-title">请选择VIP开通时长</div>
      <div class="pay-list">
        <div
          v-for="item in integral"
          :key="item.time"
          class="card"
          :class="{ on: checked.title == item.title }"
          @click="selectItem(item)"
        >
          <!-- <div v-if="index == 2" class="card-msg">
            <span>新用户限时优惠：</span>
            <span class="time">2</span>时 <span class="time">30</span>分
            <span class="time">1</span>秒里购买
            <span>多送3个月</span>
          </div> -->
          <div class="card-banner">
            <div class="title">1个月</div>
            <div class="price">
              ￥<span>{{ item.price | amountFormat }}</span
              >/月
            </div>
            <div class="noprice">
              原价：￥<span>{{
                (item.price + (type == "01" ? 2000 : 4000)) | amountFormat
              }}</span
              >/月
            </div>
          </div>
          <div class="tip">会员权益</div>
          <div class="it">
            <div class="itl">充值总token</div>
            <div class="itr">{{ item.tokens }}</div>
          </div>
          <div class="it">
            <div class="itl">有效期</div>
            <div class="itr">1个月</div>
          </div>
        </div>
      </div>
      <div v-if="QRImgUrl" class="pay-code">
        <div class="code">
          <img class="code" :src="QRImgUrl" alt="" />

          <!-- <div class="error">
            <div>二维码过期</div>
            <div class="e-btn">点击刷新</div>
          </div> -->
        </div>
        <div class="tip">
          <div class="t1">
            已省<span class="price"
              >￥{{ type == "01" ? 2000 : 4000 | amountFormat }}</span
            ><span class="noprice"
              >￥{{
                (checked.price + (type == "01" ? 2000 : 4000)) | amountFormat
              }}</span
            >
          </div>
          <div class="t2">
            使用<span class="icon icon-wx"></span>微信支付，支付<span
              class="price"
              >{{ checked.price | amountFormat }}</span
            >元
          </div>
        </div>
      </div>
    </div>
    <PaylistPop ref="child" :show.sync="showPayListPop" />
  </div>
</template>

<script>
import PaylistPop from "@/components/PaylistPop";
import QRCode from "qrcode";
import { fetchData } from "@/utils";
import {
  getUserIsvip,
  getProductList,
  getPayCode,
  getOrderStatus,
} from "@/api/api";
export default {
  name: "Pay",
  components: {
    PaylistPop,
  },
  data() {
    return {
      isVip: false,
      integral: [
        { title: "积分积分积分积分积分", price: "3000", time: 1 },
        { title: "100积分", price: "3000", time: 2 },
        { title: "200积分", price: "3000", time: 3 },
        { title: "300积分", price: "3000", time: 4 },
      ],
      checked: {},
      orderNo: "",
      QRImgUrl: "",
      QRCodeTimeout: null,
      type: "01",
      elStyle: {
        "--activeColor": "#2481ee",
      },
      showPayListPop: false,
      nickname: localStorage.getItem("userinfo")
        ? JSON.parse(localStorage.getItem("userinfo")).nickname
        : "小魔仙",
    };
  },
  mounted() {
    this.getUserInfo();
    this.getProductList();
  },
  destroyed() {
    clearInterval(this.QRCodeTimeout);
  },
  methods: {
    getUserInfo() {
      fetchData(getUserIsvip).then((res) => {
        console.log(res);
        this.isVip = res;
      });
    },
    changeVip(i) {
      this.type = i;
      if (i == "01") {
        this.elStyle = {
          "--activeColor": "#2481ee",
        };
      } else {
        this.elStyle = {
          "--activeColor": "#e1983b",
        };
      }
      this.getProductList();
      this.QRImgUrl = "";
      clearInterval(this.QRCodeTimeout);
    },
    getProductList() {
      fetchData(getProductList, this.type).then((res) => {
        this.integral = res;
      });
    },
    selectItem(item) {
      clearInterval(this.QRCodeTimeout);
      let params = {
        productId: item.id,
        userid: 1,
      };
      this.checked = item;
      fetchData(getPayCode, params, false).then((res) => {
        const { codeUrl, orderNo } = res;
        this.orderNo = orderNo;
        this.getQRcode(codeUrl);
      });
    },
    getQRcode(codeUrl) {
      let opts = {
        errorCorrectionLevel: "L", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.5, //二维码质量
        margin: 4, //二维码留白边距
        width: 136, //宽
        height: 136, //高
        text: "", //二维码内容
        color: {
          dark: "#666666", //前景色
          light: "#fff", //背景色
        },
      };
      QRCode.toDataURL(codeUrl, opts, (err, url) => {
        if (err) throw err;
        //将生成的二维码路径复制给data的QRImgUrl
        this.QRImgUrl = url;
        // 轮询请求状态
        this.QRCodeTimeout = setInterval(() => {
          this.getOrderStatus();
        }, 3000);
      });
    },
    getOrderStatus() {
      fetchData(getOrderStatus, this.orderNo, false).then((res) => {
        if (res.message != "未支付") {
          clearInterval(this.QRCodeTimeout);
          this.QRImgUrl = "";
        }
        if (res.message == "支付成功") {
          this.$message.success("支付成功!");
          // this.$parent.getUserAsset();
        }
      });
    },
    goBack() {
      this.$router.push("/index");
    },
    showPayList() {
      this.showPayListPop = true;
      this.$refs.child.getPayList();
    },
  },
};
</script>

<style lang="less" scoped>
.pay {
  min-width: 1200px;
  height: 100%;
  background-color: #f9fdff;
  .pay-info-container {
    box-sizing: border-box;
    padding: 40px 0;
    width: 1120px;
    margin: 0 auto;
    position: relative;
    .el-icon-arrow-left {
      position: absolute;
      top: 10px;
      left: 0px;
      font-size: 16px;
      color: #141414;
    }
    .pay-top {
      padding: 0 16px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .pay-tl {
        .title {
          font-size: 14px;
          font-weight: 400;
          color: #000000b8;
          line-height: 20px;
        }
        .pay-vip {
          display: flex;
          margin-top: 16px;
          .item {
            width: 238px;
            height: 74px;
            border-radius: 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            color: #212121;
            .tag {
              position: absolute;
              top: 0;
              left: 0;
              padding: 6px 10px;
              font-size: 10px;
              font-style: italic;
            }
            &:first-of-type {
              background: linear-gradient(
                147deg,
                #f3f5f5 0%,
                #f1f4f5 9%,
                #c9e5ff 100%
              );
              margin-right: 24px;
            }
            &:last-of-type {
              background: linear-gradient(
                148deg,
                #fff3de 0%,
                #ffdf9f 59%,
                #ffe7b4 100%
              );
            }
            &.active {
              border-color: var(--activeColor);
              .check {
                border-bottom: 43px solid var(--activeColor);
              }
            }
            .check {
              position: absolute;
              right: 0;
              bottom: 0;
              width: 0;
              height: 0;
              border-left: 43px solid transparent;
              i {
                color: #fff;
                position: absolute;
                right: 10px;
                top: 21px;
              }
            }
            .p1 {
              font-size: 20px;
              font-weight: 700;
              line-height: 20px;
            }
            .p2 {
              font-size: 12px;
              line-height: 17px;
              margin-top: 6px;
            }
          }
        }
      }
      .pay-tr {
        display: flex;
        .avatar {
          width: 44px;
          height: 44px;
          border-radius: 100%;
          margin-right: 16px;
        }
        .info {
          height: 44px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            font-size: 15px;
            color: #141414;
          }
          .tip {
            font-size: 14px;
            color: #0000008a;
            .history {
              color: #000000b8;
              font-size: 12px;
              text-decoration: underline;
              cursor: pointer;
            }
          }
        }
      }
    }
    .list-title {
      font-size: 14px;
      font-weight: 400;
      color: #000000b8;
      line-height: 20px;
      margin-top: 40px;
      padding-left: 16px;
    }
    .pay-list {
      display: flex;
      flex-wrap: wrap;
      .card {
        width: 320px;
        height: 310px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border: 2px solid rgba(0, 0, 0, 0.08);
        border-radius: 20px;
        cursor: default;
        color: #141414;
        padding: 0 32px 24px;
        transition: all 0.3s;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        margin: 16px;
        .card-banner {
          height: 175px;
          border-bottom: 1px solid #f3f3f3;
          padding-top: 28px;
          text-align: center;
          box-sizing: border-box;
          .title {
            font-size: 22px;
            height: 30px;
            line-height: 30px;
          }
          .price {
            margin-top: 10px;
            font-size: 14px;
            height: 52px;
            span {
              color: var(--activeColor);
              font-size: 42px;
            }
          }
          .noprice {
            color: #c7c7c7;
            margin-top: 20px;
            text-decoration: line-through;
            font-size: 14px;
          }
        }
        .tip {
          font-size: 16px;
          color: #141414;
          line-height: 20px;
          margin-top: 26px;
          font-weight: 600;
        }
        .it {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          .itl {
            color: #141414;
          }
          .itr {
            color: var(--activeColor);
          }
        }
        &.on {
          border-color: var(--activeColor);
          box-shadow: 0 3px 32px 1px #053f8129;
        }
        .card-msg {
          position: absolute;
          top: -36px;
          right: 30px;
          height: 28px;
          line-height: 28px;
          padding: 0 12px;
          background-color: #e6edf3;
          border-radius: 4px;
          white-space: nowrap;
          span {
            color: #ef4146;
          }
          .time {
            display: inline-block;
            width: 28px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: #ef4146;
            margin: 4px 2px;
            border-radius: 4px;
            color: #fff;
          }
          &::before {
            position: absolute;
            bottom: -8px;
            left: 65%;
            content: "";
            width: 0;
            height: 0;
            border: 4px solid transparent;
            border-top-color: #e6edf3;
          }
        }
      }
    }
    .pay-code {
      margin: 32px 16px;
      height: 208px;
      border-radius: 24px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      align-items: center;
      justify-content: center;
      .code {
        width: 200px;
        height: 200px;
        position: relative;
        background-color: #141414;
        .error {
          position: absolute;
          top: 0;
          height: 0;
          width: 116px;
          height: 116px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.08);
          .e-btn {
            margin-top: 4px;
            cursor: pointer;
            text-decoration: underline;
            color: var(--activeColor);
          }
        }
      }
      .tip {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 30px;
        .t1 {
          margin-bottom: 26px;
          color: #141414;
          font-size: 15px;
          .price {
            font-weight: 700;
          }
          .noprice {
            color: #c7c7c7;
            padding-left: 6px;
            text-decoration: line-through;
            font-size: 12px;
          }
        }
        .t2 {
          font-size: 14px;
          font-weight: 400;
          white-space: nowrap;
          color: #141414;
          display: flex;
          align-items: center;
          .icon {
            width: 14px;
            height: 14px;
            background-size: cover !important;
            margin: 0 3px;
            font-size: 14px;
            &.icon-wx {
              background: url("../../assets/imgs/wechat_icon.png") no-repeat;
            }
          }
          .price {
            font-size: 30px;
            font-weight: 700;
            margin-top: -10px;
          }
        }
      }
    }
  }
}
</style>
